<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
<link rel="shortcut icon" href="img/ic.png">
    <title>展示-实时成绩</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/Exhibition.css"/>
	<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1400px)" href="css/Exhibition1.css"/>

    <!-- Morris Charts CSS -->
    <link href="css/plugins/morris.css" rel="stylesheet">
	<link href="nuget/content/content/toastr.css" rel="stylesheet" type="text/css"/>
    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<!-- tab table-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
		<script src="js/cdn/html5shiv-3.7.0.js"></script>
		<script src="js/cdn/respond-1.4.2.min.js"></script>
    <![endif]-->

	<link rel="stylesheet" href="css/cdn/dataTables.bootstrap.css">
	<link rel="stylesheet" href="css/cdn/font_i0327076nave7b9.css">
    <link rel="stylesheet" type="text/css" href="css/datatable.css"/>
    <style type="text/css">
    	#stup{
    		float: right;
    		color: red;
    		font-size: 16px;
    		font-weight: 600;
    		position: absolute;
			top: 10px;
			right: 30px;
    	}
    	#left_select{
    		float: left;
    		position: absolute;
			top: 5px;
			left: 30px;
    	}
    	select{
    		width: 90px;
    		height: 32px;
    		line-height: 32px;
    		border-radius: 8px;
    		font-size: 14px;
    		background: #000000;
    		color: #12DBCD;
    	}
		.gz_animate{
			z-index: 100;
			position: absolute;
			width: 160px;
			left: 50%;
			margin-left: -80px;


			/*padding: 10px;*/
			line-height: 50px;
			text-align: center;
			font-size: 16px;
			color: #fff;

			height: 0px;
			overflow: hidden;

			background-color: #000;
			opacity: .5;
		}
		.anchorBL{
			display:none;
		}
        #illMessage .bizhang,#illMessage .chaosu{
            background: #73B043;
            overflow: hidden;
            position: absolute;
            left:0;
            top:0;
            width: 100%;
            height:100%;
            z-index: 3;
        }
        #illMessage .chd,#illMessage .yaxian{
            overflow: hidden;
            position: absolute;
            left:0;
            top:0;
            width: 100%;
            height:100%;
            z-index: 3;
        }
        .road_back{
            position: absolute;
            left:0;
            top:0;
            width: 100%;
            height:100%;
            background: #73B043;
        }
        .car_upper{
            position: absolute;
            left: 53%;
            bottom:10%;
            width: 50px;
            z-index: 100;
        }
        #illMessage .bizhang p,#illMessage .chaosu p{
            width: 150px;
            height: 100%;
            margin: 0 auto;
            border-left: 5px solid #fff;
            border-right: 5px solid #fff;
            background: #606A7C;
            position: relative;
        }
        .road_under{
            width: 150px;
            height: 100%;
            margin: 0 auto;
            border-left: 5px solid #fff;
            border-right: 5px solid #fff;
            background: #606A7C;
            position: absolute;
            left: 50%;
            top:0;
            margin-left: -75px;
            z-index: 1;
        }
        #illMessage .bizhang p img,#illMessage .chaosu p img{
            position: absolute;
            left: 50%;
            bottom:10%;
            width: 50px;
        }
        #illMessage .chaosu .speeds{
            position: absolute;
            left:20px;
            top:20px;
        }
        #illMessage .bizhang p span{
            position: absolute;
            left: 50%;
            top:0;
            width: 50px;
            height:50px;
            background-color: #000;
        }
        /*闯红灯*/
        .cross_road{
            position: absolute;
            left: 0;
            bottom:0px;
            width: 100%;
            height:770px;
            background: #73B043;
            z-index: 1;
        }
        .cross_road .left{
            width:100%;
            height: 150px;
            position: absolute;
            top:310px;
            left:0;
            border-top: 5px solid #fff;
            border-bottom: 5px solid #fff;
            background: #606A7C;
            margin:0;
            z-index: 1;
        }
        .cross_road .top{
            width:150px;
            height: 100%;
            position: absolute;
            left:50%;
            top:0;
            border-left: 5px solid #fff;
            border-right: 5px solid #fff;
            background: #606A7C;
            margin:0 0 0 -75px;
            z-index: 2;
        }
        .cross_road .mid{
            position: absolute;
            left:50%;
            top:310px;
            width:150px;
            height: 150px;
            background: #606A7C;
            margin:0 0 0 -75px;
            z-index: 5;
        }
        .chd img{
            position: absolute;
            left: 48%;
            bottom: 10%;
            z-index: 10;
        }
        .chd .light_img{
            position: absolute;
            right:20px;
            top:10px;
            width: 52px;
            height:133px;
            overflow: hidden;
        }
        .chd .light_img img{
            position: absolute;
            left:0;
            top:0;
        }
        .dash_line{
            position: absolute;
            left: 50%;
            top:-30px;
            width:6px;
            height: 400px;
            margin-left: -3px;
            background: url("img/dash_line.png") 0 0 repeat;
            z-index: 8;
            animation: dash_lined 0.2s linear infinite;
        }
        @-webkit-keyframes dash_lined
        {
            0%   {top:-30px;}
            100% {top: 30px;}
        }
        @-moz-keyframes dash_lined
        {
            0%   {top:-30px;}
            100% {top: 30px;}
        }
        @-ms-keyframes dash_lined
        {
            0%   {top:-30px;}
            100% {top: 30px;}
        }
        @keyframes dash_lined
        {
            0%   {top:-30px;}
            100% {top: 30px;}
        }
    </style>
</head>

<body style="overflow-y:visible;">
    <div id="bg">
        <div id="page-wrapper" class="container-fluid">
                <div class="row" style="height: 97%;padding-top: 0px !important;">
                	<div class="panel h100" style="padding-top: 0px !important;">
                        <div class="panel-heading" style="height: 10%;padding-top: 0px!important;"><!--ding-->
							<div style="height: 100%;display: flex;justify-content:center; align-items: center">
                        		<div class="nei" style="" v-cloak>
									<span class="biao" style="margin-right: 5rem;">{{dataObj.teamName}}</span>
								</div>
							</div>
                        </div>
                        <div class="panel-body" style="height:90%;padding-top: 0px!important;">
							<!--虚拟 地图-->
                            <div class="col-lg-6 h100" style="position: relative;overflow:hidden;background: #99DB8E">
                                <p id="vainWrap" style="position: absolute;right: 0;top: 0;width: 50%;height: 50%;">
                                    <img id="vainmaps" src="img/maps_01.jpg" alt="" style="position: absolute;left: -16px;bottom: -391px;">
                                    <img id="vaincar" src="img/car_online.png" alt="" style="position: absolute;left: 0;bottom: 0;margin: 17px 0 0 -20px">
                                </p>
							</div>
                        	<div class="col-lg-3 h100">
                        		<div class="panel panel-default border h100">
		                            <div class="panel-heading guzhan">
		                            	<div id="left_select">
		                            		<select v-model="name"  v-cloak><!--@change="drawLine()"-->
											  <option v-for="option in options" v-bind:value="option.value" >
											    {{ option.text }}
											  </option>
											</select>
		                            	</div>
		                                <h3 class="panel-title center colors " style="font-size: 20px;">实时测评</h3><img id="stup"/>
		                            </div>
		                            <div class="panel-body all" style="padding: 0px 15px !important;">
										<div style="position: relative;">
											<div class="gz_animate" id="animate" @click="test_start()">
												<img id="anim_show" alt="">
											</div>
										</div>
		                                <div id="allmap"></div>
		                            </div>
		                            
		                        </div>
		                        
		                        
		                    </div>
		                    <div class="col-lg-3 h100">
		                        <!--<div class="panel panel-default border1">
		                            <div class="panel-heading" style="padding-bottom: 0px !important;">
		                                <h3 class="panel-title center colors" style="font-size: 20px;">实时成绩</h3>
		                            </div>
		                            <div class="panel-body" style="padding: 0px 15px!important;">
		                                <div class="table">
		                                    <table id="realTime" class="display" width="100%"></table>
		                                </div>
		                            </div>
		                        </div>-->
		                         <div class="panel panel-default border1" style="height: 100%;position: relative">
		                            <div class="panel-heading" style="padding-bottom: 0px !important;">
		                                <h3 class="panel-title center colors" style="font-size: 20px;">违规信息</h3>
		                            </div>
		                            <div class="panel-body" style="padding: 0px 15px!important;">
		                                <div class="table">
		                                	<table id="Illegal" class="display" width="100%"></table>
		                                </div>
		                            </div>
									 <div class="pannel-body" id="illMessage" style="position: absolute;bottom: 1%;left: 3%;width:94%;height: 310px;overflow: hidden;display: none">
										 <div class="road_back"><p class="road_under"></p></div>
                                         <div class="bizhang" style="height: 100%;display: none;">
                                             <p>
                                                 <span class=""></span>
                                             </p>
                                         </div>
										 <div class="chd" style="height: 100%;display: none;">
                                             <div class="cross_road">
                                                 <p class="left"></p>
                                                 <p class="top"></p>
                                                 <p class="mid"></p>
                                             </div>
                                             <p class="light_img"><img src="img/linght_img.png" alt=""></p>
                                         </div>
										 <div class="chaosu" style="height: 100%;display: none;">
                                             <p>
                                             </p>
                                             <img src="img/speeds.png" alt="" class="speeds">
                                         </div>
										 <div class="yaxian" style="height: 100%;display: none;">压线</div>
                                         <img class="car_upper" src="img/car_rrightBottom.png" alt="">
                                         <div class="dash_line">
                                             <p></p>
                                         </div>
									 </div>
		                        </div>
		                    </div>
		                    
		                    
                        </div>
                   </div>
                </div>
                <!-- /.row -->
            <!-- /.container-fluid -->

        </div>
	 </div>	
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
	<!-- tab table-->
	<script src="js/cdn/jquery.dataTables.min.js"></script>
	<script src="js/cdn/dataTables.bootstrap.js"></script>
	<!-- device-->
	<script src="nuget/content/scripts/toastr.js"></script>
	<script type="text/javascript" src="js/common.js" ></script>
    <script type="text/javascript" src="js/vue/vue.js" ></script>
    <script type="text/javascript" src="js/vue/vue-router.js" ></script>
	<!--百度地图-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1e0u2fDgqYhUdilCb10Lz7xHyTBf99hG"></script>

	<!--stomp-->
	<script src="js/cdn/sockjs.min.js"></script>
	<script src="js/cdn/stomp.js"></script>
	<script>
		//
		function setH() {
            var mapNode = $(".all");
            var parh = mapNode.parent().height();
            var preh = mapNode.prev().height() + 20 + 2;
            mapNode.height(parh-preh + "px");
        }
        setH();
        $(window).resize(setH);
		//

		var  mapStyle ={ 
	        features: ["road", "building","water","land"],//隐藏地图上的poi
	        style : "normal"  //设置地图风格为高端黑
	    };
		
		var vue = new Vue({
			el: '#page-wrapper',
			data: {
				competitionDate: getQueryString("date",window.location.href), //比赛日期
				map : new BMap.Map("allmap"),    // 创建Map实例1e0u2fDgqYhUdilCb10Lz7xHyTBf99hG
				
				ak:"7WeNqOr0jtfYwU2j8vXMhahffgLuhmPS",
				service_id:149250,
				locationUrl:"http://yingyan.baidu.com/api/v3/track/gettrack?" +
				"service_id=149250&ak=7WeNqOr0jtfYwU2j8vXMhahffgLuhmPS&coord_type_output=bd09ll"+
				//"&start_time=1500566400" +
				//"&end_time=1500619528" +
				//"&entity_name=1"+
				"&process_option=need_denoise=1" +//need_denoise =0：不去噪 need_denoise =1：去噪
				",need_vacuate=1" +//need_vacuate =0：不抽稀 need_vacuate=1：抽稀
				",radius_threshold=0" +//定位精度过滤，用于过滤掉定位精度较差的轨迹点，每个轨迹点示例：radius_threshold=0：不过滤
										// radius_threshold=20：当取值大于0的整数时，则过滤掉radius大于20的轨迹点。 通常 GPS 定位精度不超过20米，Wi-Fi 定位精度不超过100米
				",need_mapmatch=0" +//need_mapmatch=0：不绑路need_mapmatch=1：绑路
				",transport_mode=driving" +//
				"&is_processed=1"+//0：关闭轨迹纠偏，返回原始轨迹
								  //1：打开轨迹纠偏，返回纠偏后轨迹。打开纠偏时，请求时间段内轨迹点数量不能超过2万，否则将返回错误。
				
				"&page_size=5000",
				teamInfo:{},
				dataObj:{},
				marker:null,
				polyline:null,
				timer :null,
				name: '1',//获取的val值
			  	options: [
			      { text: '城市赛场', value: '1' },
			      { text: '城郊赛场', value: '3' },
			      { text: '高速赛场', value: '2' }
			    ],
			},
			
			mounted: function () {
			    var _self = this;
				// TODO update init function to socket
				/* ajax init start */
                // 初始化查询 车队信息及状态 等
                var initFuncAjax = function () {
                    $.ajax({
                        type: "get",
                        url: url +'/users/'+adminId+'/teamInfoWithReferee/'+teamId,
                        async: false,
                        dataType: 'json',
                        contentType: "application/json; charset=utf-8",
                        beforeSend: function(request) {
                            request.setRequestHeader("accessToken", accessToken);
                        },
                        success: function(data) {
                            _self.init(data);
                        }
                    });
                };
                //初始化查询 realTime
                var initRealTimeAjax = function () {
                    $.ajax({
                        url : url +'/scenesResults',
                        type : 'get',
                        data:{
                            "currentPage":1,
                            "pageSize":16,
                            "count":16,
                            "teamId":teamId
                        },
                        async: false,
                        dataType : 'json',
                        beforeSend: function(request) {
                            request.setRequestHeader("accessToken", accessToken);
                        },
                        success: function (data) {
                            sessionStorage.setItem("realTimeObjEx", JSON.stringify(data));
                            _self.realTime(data);
                        }
                    });
                };
                //初始化查询 Illegal
                var initIllegalAjax = function () {
                    $.ajax({
                        url: url + '/illegalResults',
                        type: 'get',
                        data: {
                            "currentPage": 1,
                            "pageSize": 16,
                            "count": 16,
                            "teamId":teamId
                        },
                        async: false,
                        dataType: 'json',
                        beforeSend: function (request) {
                            request.setRequestHeader("accessToken", accessToken);
                        },
                        success: function (data) {
                            sessionStorage.setItem("illegalObjEx", JSON.stringify(data));
                            _self.Illegal(data);
                        }
                    });
                };


                initRealTimeAjax(); //实时成绩
                //initIllegalAjax(); //违规信息
                initFuncAjax();
				/* ajax init end */

                /* websocket stomp start */
                function connect() {
                    var socket = new SockJS(url + '/hello');
                    stompClient = Stomp.over(socket);
                    stompClient.connect({}, function (frame) {
						// realTime 实时成绩
                        stompClient.subscribe('/user/'+ teamId +'/testTeamScenesResultsocketpush', function (result) {
                            var str = sessionStorage.getItem("realTimeObjEx");
                            var data = JSON.parse(str);
                            var obj = JSON.parse(result.body);
                            data.result.unshift(obj.result);

                            sessionStorage.setItem("realTimeObjEx", JSON.stringify(data));
                            _self.realTime(data);//处理返回数据
                        });
                        // illegal 违规信息
                        stompClient.subscribe('/user/'+ teamId +'/testTeamIllegalResultsocketpush', function (result) {
                            var str = sessionStorage.getItem("illegalObjEx");
                            var data = JSON.parse(str);
                            var obj = JSON.parse(result.body);
                            data.result.unshift(obj.result);

                            sessionStorage.setItem("illegalObjEx", JSON.stringify(data));
                            _self.Illegal(data);//处理返回数据
                        });
                        stompClient.subscribe('/user/'+ teamId +'/testManualInterventionsocketpush', function (result) {
                            var str = sessionStorage.getItem("illegalObjEx");
                            var data = JSON.parse(str);
                            var obj = JSON.parse(result.body);
                            data.result.unshift(obj.result);

                            sessionStorage.setItem("illegalObjEx", JSON.stringify(data));
                            _self.Illegal(data);//处理返回数据
                        });
                        // 车队状态改变
                        stompClient.subscribe('/user/'+ teamId +'/testTeamStatesocketpush', function (result) {
                            var objStr = result.body;
                            var obj = JSON.parse(objStr);

                            _self.updateTeamState(obj.teamState);
                        });
                        // 裁判名称改变
                        stompClient.subscribe('/user/'+ teamId +'/testRefereeNamesocketpush', function (result) {
                            var objStr = result.body;
                            var obj = JSON.parse(objStr);

                            _self.dataObj.refereeName = obj.refereeName;
                        });
                    });

                }
                connect();
                /* websocket stomp end */
			},
			methods: {
			    showPop: function () {
                    /**  切换动画出现 */
                    $("#animate").animate({height:"50px"});
                },
				hidePop: function () {
                    /**  切换动画隐藏 */
                    $("#animate").animate({height:"0px"});
                },
				init: function (data) {
			        var _self = this;
                    if(data.code == 1){
                        _self.dataObj = {};
                        var result = data.result;
                        _self.dataObj = result;
                        _self.teamInfo=result;
                        _self.drawPoint();

                        setInterval('vue.drawPoint()',1000);

                        // 更改 比赛状态
                        
                        this.updateTeamState(result.teamState);
                    }else{
                        window.location.href="404.html";
                    }
				},
				updateTeamState: function (teamState) {
			        var _self = this;
			        if(_self.timer){
						clearInterval(_self.timer);
					}
                    if(teamState == 1){
                        $("#anim_show").attr("src","img/ic_fault.png");
                        $("#stup").attr("src","img/ic_end.png");
                        _self.timer = setInterval('vue.drawPoint()',1000);
                        _self.showPop();
                    }else if(teamState == 2){
                        $("#stup").hide();
                        $("#anim_show").attr("src","img/ic_pause.png");
                       _self.timer = setInterval('vue.drawPoint()',1000);
                        _self.showPop();
                    }else if(teamState == 3){
                        $("#stup").hide();
                        $("#anim_show").attr("src","img/ic_end.png");
                        _self.showPop();
                    }else if(teamState == 4){
                        $("#stup").hide();
                        $("#anim_show").attr("src","img/ic_no_start.png");
                        _self.showPop();
                    }else{
                        $("#stup").show();
                        _self.hidePop();
                       _self.timer = setInterval('vue.drawPoint()',1000);
                        $("#stup").attr("src","img/ic_ing.png");
                    }
                    
                    
                },
				Illegal:function(result){
					var myTable = $('#Illegal').DataTable({
			            "processing": false, //DataTables载入数据时，是否显示‘进度’提示
			            "stateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
			            "scrollCollapse": true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
			            "paginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页
			            "language": lang, //提示信息
			            "autoWidth": true, //自适应宽度，
			            "destroy":true,
			            "lengthMenu": [8, 30, 50],
			            "stripeClasses": ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
			            "showRowNumber": true,
			            "searching": false, //是否允许Datatables开启本地搜索
			            "paging": false, //是否开启本地分页
			            "lengthChange": false, //是否允许产品改变表格每页显示的记录数
			            "info": false, //控制是否显示表格左下角的信息
			            //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
			            "ordering": false,
			            "deferRender": true, //延迟渲染
			            //"ajax":"json/device.json",
                        "ajax": function (data, callback, settings) {
                            if(result['code'] == 1){
                                if(result.result.length != 0){
                                    var returnData = {};
                                    returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                    returnData.recordsTotal = result.numReturn;//返回数据全部记录
                                    returnData.recordsFiltered = result.numReturn;//后台不实现过滤功能，每次查询均视作全部结果
                                    returnData.data = result.result;//返回的数据列表
                                    callback(returnData);
                                }else{
                                    $('#Illegal').dataTable().fnClearTable();
                                }
                            }else{
//                                console.log("illegal data length is 0 ");
                                ifajax(result);
                            }
                        },
			            "columns": [{
			                "data":  function (obj) {
			                	var createTime = replaceHourTime(obj.createTime / 1000);
			                	/*if(obj.scenesType != 1){
			                		if(obj.scenesNo != null){
			                			return '<div style="font-size: 16px;">[场景'+obj.scenesNo+']'+obj.illegalName+'</br><span style="color:red">- '+obj.deductScore+'分</span><span style="float:right">'+createTime+'</span></div>';
			                		}else{			                			
			                			return '<div style="font-size: 16px;">[场景]'+obj.illegalName+'</br><span style="color:red">- '+obj.deductScore+'分</span><span style="float:right">'+createTime+'</span></div>';
									}
			                		
			                	}else{
			                		return '<div style="font-size: 16px;">[路段]'+obj.illegalName+'</br><span style="color:red">- '+obj.deductScore+'分</span><span style="float:right">'+createTime+'</span></div>';
			                	}*/
								if(obj.scenesType != 1){
									if(obj.scenesNo != null){
										return '<div style="font-size: 16px;">[场景'+obj.scenesNo+']'+obj.illegalName+'<span style="float:right">'+createTime+'</span></div>';
									}else{
										return '<div style="font-size: 16px;">[场景]'+obj.illegalName+'<span style="float:right">'+createTime+'</span></div>';
									}

								}else{
									return '<div style="font-size: 16px;">[路段]'+obj.illegalName+'<span style="float:right">'+createTime+'</span></div>';
								}
			                },
			                "sTitle": "被扣分数",
			                "sDefaultContent": "",
			            }]
			        });
				},
				realTime:function(result){
			        var myTable = $('#realTime').DataTable({
			            "processing": false, //DataTables载入数据时，是否显示‘进度’提示
			            "stateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
			            "scrollCollapse": true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
			            "paginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页
			            "language": lang, //提示信息
			            "autoWidth": true, //自适应宽度，
			            "lengthMenu": [8, 30, 50],
			            "stripeClasses": ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
			            "showRowNumber":true,
			            "destroy":true,
			            "searching": false, //是否允许Datatables开启本地搜索
			            "paging": false, //是否开启本地分页
			            "lengthChange": false, //是否允许产品改变表格每页显示的记录数
			            "info": false, //控制是否显示表格左下角的信息
			            //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
			            "ordering": false,
			            "deferRender": true, //延迟渲染
			            //"ajax":"json/device.json",
                        "ajax": function (data, callback, settings) {
                            if(result['code'] == 1){
                                if(result.result.length != 0){
                                    var returnData = {};
                                    returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                    returnData.recordsTotal = result.numReturn;//返回数据全部记录
                                    returnData.recordsFiltered = result.numReturn;//后台不实现过滤功能，每次查询均视作全部结果
                                    returnData.data = result.result;//返回的数据列表
                                    callback(returnData);
                                }else{
                                    $('#realTime').dataTable().fnClearTable();
                                }
                            }else{
                                console.log(result);
                                console.log("realtime data length is 0 ");
//                                ifajax(result);
                            }
                        },
			            "columns": [{
			                "data": function(obj) {
			                    var createTime = replaceHourTime(obj.createTime / 1000);
								/*if(obj.scenesType != 1){
									if(obj.scenesNo != null){
										return '<div style="font-size: 16px;">'+obj.stadiumName+'<span style="float:right; width:150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">'+'[场景'+obj.scenesNo+']'+obj.scenesName+'</span></br><span style="color:red">'+obj.scenesResult+'分</span><span style="float:right">'+createTime+'</span></div>';
									}else{
										return '<div style="font-size: 16px;">'+obj.stadiumName+'<span style="float:right">'+'[场景]'+obj.scenesName+'</span></br><span style="color:red">'+obj.scenesResult+'分</span><span style="float:right">'+createTime+'</span></div>';
									}

								}else{
									return '<div style="font-size: 16px;">'+obj.stadiumName+'<span style="float:right">'+'[路段]'+obj.scenesName+'</span></br><span style="color:red">-'+obj.scenesResult+'分</span><span style="float:right">'+createTime+'</span></div>';

								}*/
			                	if(obj.scenesType != 1){
									if(obj.scenesNo != null){
										return '<div style="font-size: 16px;">'+obj.stadiumName+'<span style="float:right; width:150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">'+'[场景'+obj.scenesNo+']'+obj.scenesName+'</span><span style="float:right">'+createTime+'</span></div>';
									}else{
										return '<div style="font-size: 16px;">'+obj.stadiumName+'<span style="float:right">'+'[场景]'+obj.scenesName+'</span><span style="float:right">'+createTime+'</span></div>';
									}

								}else{
									return '<div style="font-size: 16px;">'+obj.stadiumName+'<span style="float:right">'+'[路段]'+obj.scenesName+'</span><span style="float:right">'+createTime+'</span></div>';

								}
			                },
			                "sTitle": "实时时间", //标题
			                "sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
			            }]
			        });
				},
				drawPoint:function () {
					_self=this;
					var startTime;
					var endTime;
					var todayStamp=new Date(replaceDate()).getTime()/1000;
					if(this.competitionDate==null){
						startTime=todayStamp;
						endTime=parseInt(new Date().getTime()/1000);//当前时间
					}else {
						var competitionDateStamp=new Date(this.competitionDate).getTime()/1000;
						startTime=competitionDateStamp;//比赛日零点
						endTime=competitionDateStamp+60*60*24-1;//比赛日24点
					}
					$.ajax({
						type:'get',
						url:this.locationUrl+"&entity_name="+this.teamInfo.teamId+"&start_time="+startTime+"&end_time="+endTime,
						dataType:'jsonp',
						async:true,
						processData: false,
						success:function(data){
							//console.log(data);
							if(data.status==0){
								
								map.removeOverlay(_self.marker)
								map.removeOverlay(_self.polyline);
								var points=data.points;
								var polyPoints=[];
								for(var i=0;i<points.length;i++){
									polyPoints.push(new BMap.Point(points[i].longitude, points[i].latitude));
								}
								_self.polyline = new BMap.Polyline(polyPoints, {strokeColor:"blue", strokeWeight:4, strokeOpacity:0.5});   //创建折线
								map.addOverlay(_self.polyline);   //增加折线
								var endPoint=points.pop();
								var startPoint=data.start_point;
								if(!endPoint || !startPoint){
								    return;
								}
								var longitude=endPoint.longitude;
								var latitude=endPoint.latitude;
								var direction=endPoint.direction;
								var modify_time=endPoint.create_time;
								var centerLongitude=(startPoint.longitude+endPoint.longitude)/2;
								var centerLatitude=(startPoint.latitude+endPoint.latitude)/2;
								var d1 = new Date(modify_time);
								var d2 = new Date();
								var time=parseInt(d2 - d1) / 1000;//两个时间相差的秒数
								var deviceState;
								if(time<(60*10)){
									deviceState=1;
								}else{
									deviceState=0;
								}
								var myIcon= new BMap.Icon((deviceState==1)?("img/car_online.png"):("img/car.png"), new BMap.Size(41,34));
								var point = new BMap.Point(longitude,latitude);
								var opts = {
									width : 200,     // 信息窗口宽度
									height: 100,     // 信息窗口高度
									title : "车辆信息" , // 信息窗口标题
									enableMessage:true,//设置允许信息窗发送短息
									message:"提示信息"
								}
								if(!_self.marker)
									map.centerAndZoom(new BMap.Point(centerLongitude,centerLatitude), 16); // 初始化地图,设置中心点坐标和地图级别
									var pt = new BMap.Point(longitude, latitude);
								_self.marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
								_self.marker.addEventListener("click", function(){
									var infoWindow = new BMap.InfoWindow("车队名称:"+_self.teamInfo.teamName+",上传时间："+modify_time+",行驶距离"+parseInt(data.distance)+"米");
									map.openInfoWindow(infoWindow,point); //开启信息窗口
								});
								_self.marker.setRotation(direction);
								map.addOverlay(_self.marker);
							}else{}
						},
					});
				},
				changeChNo: function(name) {
					this.name = name;
					this.drawLine();
				},
				drawLine:function(){
					var stadiumId = this.name;
					console.log(stadiumId);
					$.ajax({
			  			type: "get",
			  			url:url+'/users/'+adminId+'/stadium/'+stadiumId+'/postion',
			  			async: false,
			  			dataType: 'json',
			  			beforeSend: function(request) {
							request.setRequestHeader("accessToken", accessToken);
						},
						success: function(data) {
			  				console.log(data);
							if(data.code != 0){
								var map = new BMap.Map("allmap", {mapType:BMAP_SATELLITE_MAP});    // 创建Map实例
								map.setMapStyle(mapStyle);
								map.centerAndZoom(new BMap.Point(data.result.lng, data.result.lat,), 17);  // 初始化地图,设置中心点坐标和地图级别
								map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
								map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
							}
						}
			  		});
				},
				test_start:function () {
					locationPoint();
					$("#animate img").attr("src","img/ic_ing.png");
					$("#illMessage").show();
				},
                //初始化虚拟动画
                initAnimate:function () {

				}
			}
		});
		var map = new BMap.Map("allmap", {mapType:BMAP_SATELLITE_MAP});    // 创建Map实例
		map.setMapStyle(mapStyle);
		map.centerAndZoom(new BMap.Point(120.7881841276, 31.5942857184), 17);  // 初始化地图,设置中心点坐标和地图级别
		map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
		var ptLight = new BMap.Point(120.7747+0.0109222, 31.592976+0.003684);
		var myIconLight= new BMap.Icon("img/translight.png", new BMap.Size(10,28));
		var markerLight = new BMap.Marker(ptLight,{icon:myIconLight});
		map.addOverlay(markerLight);
		var ptLight2 = new BMap.Point(120.77658+0.0109222, 31.593885+0.003684);
		var markerLight2 = new BMap.Marker(ptLight2,{icon:myIconLight});
		map.addOverlay(markerLight2);
		var ptLight3 = new BMap.Point(120.77778+0.0109222, 31.592545+0.003684);
		var markerLight3 = new BMap.Marker(ptLight3,{icon:myIconLight});
		map.addOverlay(markerLight3);

		function locationPoint() {
			console.log(23);
			var timer1=null;
			$.ajax({
				type:"POST",
				url:url+"/locationTeamId",
				success:function (data) {
					console.log(data);
					var arrslon=data[1];
					var arrlat=data[0];
					var polyPoints=[
					];
					/*for(var i=7800;i<arrslon.length;i++){
						if(arrslon[i]==0||arrlat[i]==0){
							continue;
                        }else{
							polyPoints.push(new BMap.Point(arrslon[i], arrlat[i]));
                        }

                    }
					var polyline = new BMap.Polyline(polyPoints, {strokeColor:"blue", strokeWeight:4, strokeOpacity:0.5});   //创建折线
					map.addOverlay(polyline);   //增加折线*/
                    var time_num=0;
                    var polyline=null;
					var pt0=null;
					var marker0=null;
                    var start_angle=63;
                    timer1=setInterval(function () {
						map.removeOverlay(polyline);
						map.removeOverlay(marker0);
                        for (var i=time_num;i<time_num+2;i++){
                        	if (i>=arrslon.length){
                        		$("#illMessage").hide();
                        		$("#animate img").attr("src","img/ic_end.png")
                        		break;
                        		clearInterval(timer1);
                            }
							if(arrslon[i]==0||arrlat[i]==0){
								continue;
							}else{
								polyPoints.push(new BMap.Point(arrslon[i]+0.0109222, arrlat[i]+0.003684));
							}
							if(i==130){
								console.log(arrslon[i], arrlat[i])
								var myIcon= new BMap.Icon("img/popo.png", new BMap.Size(40,80));
								var pt = new BMap.Point(arrslon[i]+0.0109222, arrlat[i]+0.003684);
								var marker1 = new BMap.Marker(pt,{icon:myIcon});
								map.addOverlay(marker1);
								Distance();
                            };
							if(i==227){
								var myIcon2= new BMap.Icon("img/popo.png", new BMap.Size(40,80));
								var pt2 = new BMap.Point(arrslon[i]+0.0109222, arrlat[i]+0.003684);
								var marker2 = new BMap.Marker(pt2,{icon:myIcon2});
								map.addOverlay(marker2);
								redLight();
                            };
							if(i==420){
								var myIcon3= new BMap.Icon("img/popo.png", new BMap.Size(40,80));
								var pt3 = new BMap.Point(arrslon[i]+0.0109222, arrlat[i]+0.003684);
								var marker3 = new BMap.Marker(pt3,{icon:myIcon3});
								map.addOverlay(marker3);
								overSpaceed();
							};
							if(i==550){
								var myIcon4= new BMap.Icon("img/popo.png", new BMap.Size(40,80));
								var pt4 = new BMap.Point(arrslon[i]+0.0109222, arrlat[i]+0.003684);
								var marker4 = new BMap.Marker(pt4,{icon:myIcon4});
								map.addOverlay(marker4);
								illea();
							}
							if (i>=440&&i<=550&&start_angle<=151){
								start_angle=start_angle+2
                            }else if(i>=700&&start_angle<=243){
								start_angle=start_angle+2
                            }
							pt0 = new BMap.Point(arrslon[i]+0.0109222, arrlat[i]+0.003684);
                        }
						polyline = new BMap.Polyline(polyPoints, {strokeColor:"blue", strokeWeight:4, strokeOpacity:0.5});   //创建折线
						map.addOverlay(polyline);
						var myIcon0= new BMap.Icon("img/car.png", new BMap.Size(41,34));
						marker0 = new BMap.Marker(pt0,{icon:myIcon0});
						marker0.setRotation(start_angle);
						map.addOverlay(marker0);
						time_num+=2;
					},100)


				},
				error:function (data) {
					console.log(data);
				}
			})
			console.log(33)
		};
		//显示地图
		//locationMap();
		function locationMap() {
<<<<<<< HEAD
			var timer11=null;
			clearInterval(timer11);
=======
			var timer1=null;
>>>>>>> cee4c66b45a5c5763573f165a74f371f41546cb3
			//var mapLon=120.77244;
			//var mapLat=31.592481;
			var mapLon=120.7728;
			var mapLat=31.599698;
			var mapLonWidth=0.0116
            var mapLatHeight=0.00752;
			var prop=0.00001287;
			var timer11=null;
			var gpsIndex=0;
<<<<<<< HEAD
			$("#vainmaps").css({"width":Math.floor(mapLonWidth/prop*0.707),"height":"aotu"});
=======
			$("#vainmaps").css({"width":Math.floor(mapLonWidth/prop*0.707),"height":Math.floor(mapLatHeight/prop)});
			console.log(22);
>>>>>>> cee4c66b45a5c5763573f165a74f371f41546cb3
			$.ajax({
				type:"POST",
				url:url+"/locationTeamId",
				success:function (data) {
					console.log(000);
					console.log(data);
					var arrslon=data[1];
					var arrlat=data[0];
					console.log(arrslon[0],arrlat[0])
					var mapLeft=Math.floor((mapLon-arrslon[0])/prop);
<<<<<<< HEAD
					//var mapBottom=Math.floor((mapLat-arrlat[0])/prop*0.707);
					var mapBottom=308;
					$("#vainmaps").css({"left":-mapLeft,"bottom":-mapBottom});
					timer11=setInterval(function () {
                        /*var prevLeft=$("#vainmaps").position().left;
                        var prevbottom=$("#vainmaps").position().top+$("#vainmaps").height()-$("#vainWrap").height();*/
                        if (gpsIndex<=arrslon.length){
							var nextLeft=-mapLeft-Math.floor((arrslon[gpsIndex]-arrslon[0])/prop);
							console.log(1);
							var nextBottom=mapBottom+Math.floor((arrlat[gpsIndex]-arrlat[0])/prop);
							$("#vainmaps").animate({"left":nextLeft,"bottom":-nextBottom},100);
                        }else{
                        	clearInterval(timer11);
                        }
						gpsIndex+=5;
					},100)
=======
					var mapBottom=Math.floor((mapLat-arrlat[0])/prop);
					//$("#vainmaps").css({"left":-mapLeft,"bottom":-mapBottom});
					/*timer11=setInterval(function () {
						clearInterval(timer11);
                        var prevLeft=$("#vainmaps").position().left;
                        var prevbottom=$("#vainmaps").position().top+$("#vainmaps").height()-$("#vainWrap").height();
                        if (gpsIndex<=arrslon.length){
							var nextLeft=prevLeft-Math.floor((arrslon[gpsIndex]-arrslon[0])/prop);
							var nextBottom=prevbottom-Math.floor((arrlat[gpsIndex]-arrlat[0])/prop);
							$("#vainmaps").css({"left":nextLeft,"bottom":nextBottom});
                        }else{
                        	clearInterval(timer11);
                        }


					},1000)*/
>>>>>>> cee4c66b45a5c5763573f165a74f371f41546cb3
				},
				error:function (data) {
					console.log(0000);
					console.log(data);
				}
			})
			console.log(33)
		}
		locationMap()
		function illea(){
			$.ajax({
				type: "POST",
				url: url + "/locationForPoint",
				success: function (data) {
					//console.log(data);
					$("#illMessage .yaxian").fadeIn();
					setTimeout(function () {
						$("#illMessage .yaxian").fadeOut();
					},2000);
					var redlight="";
					if (data[0].code==0){
						redlight='未压线';
						//$("#illMessage .yaxian").html("未压线");
					}else{
						redlight='压线';
						//$("#illMessage .yaxian").html("压线");
                        yaxian_true();
					}
					var strs='<tr role="row" class="odd"><td><div style="font-size: 16px;">'+redlight+'<span style="float:right">'+replaceHourTime(new Date().getTime()/1000)+'</span></div></td></tr>';
					$("#Illegal").append(strs);
				}
			})
        }
		function Distance(){
			$.ajax({
				type: "POST",
				url: url + "/locationForDistance",
				success: function (data) {
					$("#illMessage .bizhang").fadeIn();
					setTimeout(function () {
						$("#illMessage .bizhang").fadeOut();
					},2000);
					var redlight="";
					if (data.code==0){
						redlight='避障成功';
						//$("#illMessage .bizhang").html("避障成功");
						bizhang_success();
					}else{
						redlight='未避障';
						//$("#illMessage .bizhang").html("未避障");
						bizhang_false();
					}
					var strs='<tr role="row" class="odd"><td><div style="font-size: 16px;">'+redlight+'<span style="float:right">'+replaceHourTime(new Date().getTime()/1000)+'</span></div></td></tr>';
					$("#Illegal").append(strs);
				}
			})
		}
        function redLight() {
			$.ajax({
				type: "POST",
				url: url + "/locationForRed",
				success: function (data) {
					//console.log(data.code);
					$("#illMessage .chd").fadeIn();
					setTimeout(function () {
						$("#illMessage .chd").fadeOut();
					},2000);
					var redlight="";
					if (data.code==0){
						redlight='绿灯通过';
						chd_true()
					}else{
						redlight='闯红灯';
						chd_false()
                    }
                    var strs='<tr role="row" class="odd"><td><div style="font-size: 16px;">'+redlight+'<span style="float:right">'+replaceHourTime(new Date().getTime()/1000)+'</span></div></td></tr>';
					$("#Illegal").append(strs);
				}
			})
		}
		function overSpaceed() {
			$.ajax({
				type: "POST",
				url: url + "/locationForSpeed",
				success: function (data) {
					//console.log(data.code);
					$("#illMessage .chaosu").fadeIn();
					setTimeout(function () {
						$("#illMessage .chaosu").fadeOut();
					},2000);
					var redlight="";
					if (data.code==0){
						redlight='正常行驶';
						//$("#illMessage .chaosu").html("正常行驶");
					}else{
						redlight='超速行驶';
						//$("#illMessage .chaosu").html("超速行驶");
					}
					var strs='<tr role="row" class="odd"><td><div style="font-size: 16px;">'+redlight+'<span style="float:right">'+replaceHourTime(new Date().getTime()/1000)+'</span></div></td></tr>';
					$("#Illegal").append(strs);
				}
			})
		};
        //避障失败
		function bizhang_false(){
			$(".bizhang p span").animate({"top":"140px"},1000);
		}
        //避障成功
		function bizhang_success(){
			$(".bizhang p span").animate({"top":"350px"},1000);
			$(".car_upper").animate({"margin-left":"-65px"},500);
			setTimeout(function () {
				$(".car_upper").animate({"margin-left":"0"},500);
			},700)
		}
        //闯红灯
        function chd_false() {
            $("#illMessage .cross_road").animate({"bottom":"-500px"},2000);
            $(".chd .light_img img").css("left","0")
		}
		//绿灯通过
		function chd_true() {
			$("#illMessage .cross_road").animate({"bottom":"-500px"},2000);
			$(".chd .light_img img").css("left","-130px")
		}
		//超速
        function speedOver() {
			//$(".chd .light_img img").css("left","130px")
		}
//		压线
        function yaxian_true() {
			$(".car_upper").animate({"margin-left":"25px"},500);
			setTimeout(function () {
				$(".car_upper").animate({"margin-left":"0"},500);
			},1000)
		}

	</script>
</body>

</html>
